<template>
	<view class="discount">
		<cu-custom :logo="logo" :bg="bg"></cu-custom>
		<view class="today">
			<special-list :title="shop.title" :list="shop.arr" @change="countTabNum"></special-list>
		</view>
		<pgoods :title='goodsInfo.title' :list="goodsInfo.arr" :finishText="finishText" @change="countTabNum"></pgoods>
		<view class="guid"></view>
		<bottom v-model="nums"></bottom>
		<!-- <cards :num="nums"></cards> -->
	</view>
</template>

<script>
	import cuCustom from './components/cabar.vue'
	import specialList from './components/specialList.vue'
	import pgoods from './components/pgoods.vue'
	import bottom from './components/bottom.vue'
	import cards from './components/cards.vue'
	import mixi from './data/index.js'
	export default {
		mixins: [mixi],
		components: {
			cuCustom,
			specialList,
			pgoods,
			bottom,
			cards
		},
		data() {
			return {
				finish: false,
				loading: false,
				params: {
					storageId: 0,
					pageNo: 1,
					pageSize: 12
				},
				height: 60,
				bg: require('../static/bg1.png'),
				logo: require('../static/preferenLogo.png'),
				shop: {
					title: '特价爆款',
					arr: []
				},
				goodsInfo: {
					title: '超值好货',
					arr: []
				}
			}
		},
		computed: {
			finishText() {
				if (!this.finish) {
					return '我也是有底线的~'
				}
				return this.loading ? '努力加载数据中...' : '下拉刷新'
			}
		},
		onLoad() {
			this.params.storageId = this.$store.state.storageId
			this.init()
		},
		onReachBottom() {
			if (this.finish) {
				this.getData()
			}
		},
		methods: {
			getData() {
				this.loading = true
				this.$api.request('integral', 'goodValuePage', this.params).then(res => {
					this.loading = false
					this.goodsInfo.arr = [...this.goodsInfo.arr, ...res.data.items]
					this.finish = goodsList.length === this.params.pageSize
					this.params.pageSize++
				})
			},
			init() {
				uni.showLoading({
					title: '请求中...'
				})
				Promise.all([this.$api.request('integral', 'specialHotSalePage', {
					storageId: this.$store.state.storageId // this.$store.state.storageId
				}), this.$api.request('integral', 'goodValuePage', this.params)]).then(res => {
					uni.hideLoading()
					const shopList = res[0].data.items
					this.shop.arr = shopList
					const goodsList = res[1].data.items
					this.goodsInfo.arr = goodsList
					this.params.pageSize++
					this.finish = goodsList.length === this.params.pageSize
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discount {
		width: 750rpx;
		background-color: #f2f2f2;
		min-height: 100vh;
	}

	.header-fix {
		flex: 1;
		height: 100%;
		display: flex;
		padding-left: 20rpx;
		align-items: center;
		background-color: #007AFF;

		&-main {
			flex: 1;
			padding-left: 30rpx;
		}
	}

	.today {
		margin-top: -360rpx;
		position: relative;
		z-index: 5;
	}

	.guid {
		width: 750rpx;
		height: 170rpx;
	}
</style>
